<script setup lang="ts">
interface PageSkeletonProps {
  showTitle?: boolean;
  showFilters?: boolean;
  filterCount?: number;
  showTableHeader?: boolean;
  showTable?: boolean;
  columns?: number;
  rows?: number;
  showCards?: boolean;
  cardCount?: number;
  showDetail?: boolean;
  showForm?: boolean;
  formFields?: number;
  showPagination?: boolean;
}

withDefaults(defineProps<PageSkeletonProps>(), {
  showTitle: true,
  showFilters: false,
  filterCount: 4,
  showTableHeader: false,
  showTable: true,
  columns: 5,
  rows: 8,
  showCards: false,
  cardCount: 8,
  showDetail: false,
  showForm: false,
  formFields: 6,
  showPagination: true
});
</script>

<template>
  <div class="page-skeleton min-h-screen animate-pulse bg-gray-50 p-4">
    <!-- 页面标题区域 -->
    <div v-if="showTitle" class="mb-6">
      <div class="mb-2 h-6 w-32 rounded bg-gray-200"></div>
      <div class="h-4 w-48 rounded bg-gray-200"></div>
    </div>

    <!-- 搜索/筛选区域 -->
    <div v-if="showFilters" class="mb-4 rounded-lg bg-white p-4">
      <div class="flex flex-wrap gap-4">
        <div v-for="i in filterCount" :key="i" class="h-8 w-32 rounded bg-gray-200"></div>
      </div>
    </div>

    <!-- 表格工具栏 -->
    <div v-if="showTableHeader" class="mb-4 rounded-lg bg-white p-4">
      <div class="flex items-center justify-between">
        <div class="flex gap-2">
          <div v-for="i in 3" :key="i" class="h-8 w-20 rounded bg-gray-200"></div>
        </div>
        <div class="h-8 w-24 rounded bg-gray-200"></div>
      </div>
    </div>

    <!-- 表格主体 -->
    <div v-if="showTable" class="rounded-lg bg-white">
      <!-- 表格头部 -->
      <div class="flex border-b border-gray-200 p-4">
        <div v-for="i in columns" :key="i" class="mr-4 h-4 flex-1 rounded bg-gray-200 last:mr-0"></div>
      </div>

      <!-- 表格行 -->
      <div v-for="row in rows" :key="row" class="flex border-b border-gray-100 p-4 last:border-b-0">
        <div v-for="i in columns" :key="i" class="mr-4 h-4 flex-1 rounded bg-gray-200 last:mr-0"></div>
      </div>
    </div>

    <!-- 卡片网格 -->
    <div v-if="showCards" class="grid grid-cols-1 gap-4 lg:grid-cols-3 md:grid-cols-2 xl:grid-cols-4">
      <div v-for="i in cardCount" :key="i" class="rounded-lg bg-white p-4">
        <div class="mb-3 h-4 w-3/4 rounded bg-gray-200"></div>
        <div class="mb-2 h-3 w-full rounded bg-gray-200"></div>
        <div class="h-3 w-2/3 rounded bg-gray-200"></div>
      </div>
    </div>

    <!-- 详情页面布局 -->
    <div v-if="showDetail" class="grid grid-cols-1 gap-6 lg:grid-cols-3">
      <!-- 主内容区 -->
      <div class="lg:col-span-2 space-y-6">
        <div class="rounded-lg bg-white p-6">
          <div class="mb-4 h-5 w-40 rounded bg-gray-200"></div>
          <div class="space-y-3">
            <div v-for="i in 5" :key="i" class="flex">
              <div class="mr-4 h-4 w-24 rounded bg-gray-200"></div>
              <div class="h-4 flex-1 rounded bg-gray-200"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="space-y-4">
        <div v-for="i in 3" :key="i" class="rounded-lg bg-white p-4">
          <div class="mb-3 h-4 w-20 rounded bg-gray-200"></div>
          <div class="space-y-2">
            <div class="h-3 w-full rounded bg-gray-200"></div>
            <div class="h-3 w-4/5 rounded bg-gray-200"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单布局 -->
    <div v-if="showForm" class="rounded-lg bg-white p-6">
      <div class="mb-6 h-5 w-32 rounded bg-gray-200"></div>
      <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
        <div v-for="i in formFields" :key="i" class="space-y-2">
          <div class="h-4 w-20 rounded bg-gray-200"></div>
          <div class="h-8 w-full rounded bg-gray-200"></div>
        </div>
      </div>
      <div class="mt-8 flex justify-end gap-4">
        <div class="h-8 w-16 rounded bg-gray-200"></div>
        <div class="h-8 w-16 rounded bg-gray-200"></div>
      </div>
    </div>

    <!-- 分页 -->
    <div v-if="showPagination" class="mt-6 flex items-center justify-between">
      <div class="h-8 w-32 rounded bg-gray-200"></div>
      <div class="flex gap-2">
        <div v-for="i in 5" :key="i" class="h-8 w-8 rounded bg-gray-200"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
